<template>
  <page-view>
    <div class="main bg-backgroundColor flex justify-center items-center flex-wrap  h-auto">
      <div class="w-[1500px] h-[200px] ml-[10px] items-center">
        <p class="font-bold text-white text-3xl m-[40px]">分享宠物生活,乐在其中</p>
        <p class="font-bold text-white text-center" @click="dialogFormVisible = true">点击此处，分享您和宠物乐事</p>
        <el-dialog v-model="dialogFormVisible" title="分享您和宠物的乐事">
          <el-form :model="form">
            <el-form-item label="分享内容" :label-width="formLabelWidth">
              <el-input v-model="form.shareContent" autocomplete="off" type="textarea" />
            </el-form-item>
            <el-form-item label="位置" :label-width="formLabelWidth">
              <el-input v-model="form.shareArea" autocomplete="off" />
            </el-form-item>
            <el-form-item label="分享时间" :label-width="formLabelWidth">
              <el-date-picker v-model="form.shareTime" type="datetime" placeholder="选则分享的时间"
                value-format="YYYY-MM-DD hh:mm:ss" />
            </el-form-item>
            <el-form-item label="分享图片" :label-width="formLabelWidth">
              <el-upload v-model:file-list="form.fileList" class="upload-demo" :action="baseURL + '/admin/file/upload'"
                :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handkeUploadSuccess"
                list-type="picture">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    jpg/png files with a size less than 500kb
                  </div>
                </template>
              </el-upload>
            </el-form-item>

          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="userShareTheir">
                分享
              </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <div>
        <el-tabs v-model="activeName" style="margin: 0 auto;" class="demo-tabs" @tab-click="handleClick">
          <div>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
            <el-tab-pane label="" name="" disabled></el-tab-pane>
          </div>

          <el-tab-pane label="分享中心" name="first">
            <div class="sub_main  w-[1500px] h-[800px] m-auto mt-[10px]">
              <el-scrollbar height="800px">
                <ul class="flex flex-wrap  justify-center ">
                  <li v-for="item in shareList" :key="item" :custom-var="0"
                    class="w-[480px] h-[400px] border-cyan-200 border-4 rounded-md m-[4px] shadow-inner bg-userShare-img bg-contain">
                    <div class="w-[400px] h-[300px] m-[50px]">
                      <div class="flex">
                        <el-avatar :size="50" :src="item.user.pic" class="mt-[10px]" />
                        <div class="font-bold text-xs mt-20 ml-[10px]">
                          <p>{{ item.user.nickname }}</p>
                          <p>{{ item.shareTime }}</p>
                        </div>
                      </div>
                      <div class="w-[360px] h-[100px] border-2 ml-[10px] break-all overflow-hidden  ...">
                        <p>{{ item.shareContent }}</p>
                      </div>
                      <div class="demo-image__preview flex">
                        <el-image style="width: 120px; height: 120px;margin-left: 10px;" :src="item.sharePic"
                          :zoom-rate="1.2" :preview-src-list="item.sharePicList" :initial-index="4" fit="cover" />
                        <div class="flex text-xs text-blue-400 mt-[100px]">
                          <p>位置：{{ item.shareArea }}</p>
                          <img src="../../assets/img/小眼睛.png" class="h-[20px] w-[20px] ml-[50px] mt-[-4px]" alt="">
                          <p>{{ item.shareView }}</p>
                          <img v-if="item.count % 2 === 0" src="../../assets/img/good.png"
                            class="h-[20px] w-[20px] ml-[10px] mt-[-4px]" alt=""
                            @click="addAlike(item, item.count % 2 === 1 ? item.shareAlike-- : item.shareAlike++)">
                          <img v-if="item.count % 2 === 1" src="../../assets/img/goodSuccess.png"
                            class="h-[20px] w-[20px] ml-[10px] mt-[-4px]" alt=""
                            @click="addAlike(item, item.count % 2 === 1 ? item.shareAlike-- : item.shareAlike++)">
                          <p>{{ item.shareAlike }}</p>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </el-scrollbar>

            </div>
          </el-tab-pane>
          <el-tab-pane label="订单评价中心" name="second">
            <div class="sub_main  w-[1500px] h-[800px] border-4 m-auto mt-[10px]">
              <el-scrollbar height="800px">
                <ul class="flex flex-wrap  justify-center ">
                  <li v-for="item in orderEvalution" :key="item"
                    class="w-[480px] h-[500px]  m-[4px] shadow-inner bg-orderEvolution-img bg-cover">

                    <div class="m-[80px] mt-[140px] w-[300px] h-[280px]">
                      <p class="text-sm text-red-500 font-bold">评价:</p>
                      <p>{{ item.evaluationContent }}</p>
                      <p class="text-sm text-red-500 font-bold">订单内容:</p>
                      <ul>
                        <el-scrollbar height="180px">
                          <li class="flex" v-show="item.ordersVo" v-for="shopcart in item.ordersVo.shopCartList"
                            :key="shopcart">
                            <div class="demo-image__preview w-[100px] h-[100px]">
                              <el-image style="width: 100px; height: 100px" :src="shopcart.good.pic" :zoom-rate="1.2"
                                :preview-src-list="shopcart.good.picList" :initial-index="4" fit="cover" />
                            </div>
                            <p>{{ shopcart.good.goodName }}
                            <p>数量:{{ shopcart.commodityNumber }}</p>
                            </p>
                          </li>
                        </el-scrollbar>
                      </ul>
                    </div>
                  </li>
                </ul>
              </el-scrollbar>

            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

    </div>
  </page-view>
</template>
<script setup>
import { ref, reactive, inject } from 'vue'
import API from '../../utils/API';
import { ElNotification, ElMessage, ElLoading } from "element-plus";
const baseURL = inject("baseURL");
const activeName = ref('first')
let imgGood = "@/assets/img/good.png";
let addOrJian = ref(1);
let searchObj = reactive({
  page: 1,
  pageSize: 100
})

let shareList = ref([])
let dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  shareContent: '',
  shareArea: '',
  shareTime: '',
  sharePic: '',
  fileList: []
})
let fileListCommon = ref([])
/**
 * 上传图片成功以后的回调
 * @param response
 */
const handkeUploadSuccess = (response, file) => {
  console.log(response.data);
  fileListCommon.value.push({ name: file.name, url: response.data })
  console.log(fileListCommon)
}
const userShareTheir = () => {
  form.fileList = fileListCommon;
  API.UserShareCenter.userShareTheir(form).then((response) => {
    ElNotification({
      title: "提示",
      message: "分享成功!审核通过后展示",
      type: "success"
    });
  }).finally(() => {
    dialogFormVisible.value = false;
  })
}
const getUserShareAll = () => {
  API.UserShareCenter.userShareCenterInfo(searchObj).then((response) => {
    shareList.value = response.records;
    // 添加 count 属性
    shareList.value.forEach(item => {
      item.count = 0;
      item.imgGood = "../../assets/img/good.png";
    });
  })
}
getUserShareAll()
const handleClick = () => {

}
//查询所有订单评价
let orderEvalution = reactive([])
const selectAllOrderEvolutions = () => {
  API.CenterInfo.selectAllOrderEvolutions().then(response => {
    orderEvalution = response.evaluations
  })
}
selectAllOrderEvolutions();

const addAlike = (item) => {
  ++item.count;
  console.log(item.count)
  if (item.count % 2 === 1) {
    addOrJian.value = 1;
  } else if (item.count % 2 === 0) {
    addOrJian.value = -1;
  }
  console.log("value", addOrJian.value);
  API.UserShareCenter.addAlike(item.id, addOrJian.value).then((response) => {
    //点赞成功提示
    if (item.count % 2 === 1) {
      ElNotification({
        title: "提示",
        message: "您已点赞",
        type: "success"
      });
    } else if (item.count % 2 === 0) {
      ElNotification({
        title: "提示",
        message: "您已取消点赞",
        type: "warning"
      });
    }
  })
}


const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview = (file) => {
  console.log(file)
}
</script>

<style scoped lang="scss">
.main {
  background-image: url('../../assets/img/userShareBack.png');
  background-size: cover;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

:deep(.el-tabs__item.is-active) {
  color: white;
  font-size: larger;
}

:deep(.el-tabs__item) {
  color: white;
}
</style>